<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <title>Vue Todo</title>
    <style>
        .empty {
            border-color: red;
        }

        .completed {
            text-decoration: line-through;
        }

        .selected {
            color: red;
        }
    </style>
</head>

<body>
    <div id="todo-app">
        <div>
            <input type="button" value="全部标为完成" @click="markAllAsCompleted" v-if="todos" />
            <input type="text" v-bind:class='{ empty: !count }' placeholder="添加 todo" v-model="newTodoTitle"
                @keyup.enter="addTodo" />
            <label v-if="count == 0">请输入</label>
        </div>
        <!-- todo list -->
        <ul>
            <li v-for='todo in filteredTodos' :key='todo.id'>
                <span :class="{completed: todo.completed}" @dblclick="editTodo(todo)">{{ todo.title }}</span>
                <input type="button" value="标为完成" @click="markAsCompleted(todo)" v-if="!todo.completed">
                <input type="button" value="标为未完成" @click="markAsNotCompleted(todo)" v-if="todo.completed">
                <input type="button" value="删除" @click="removeTodo(todo)">
                <input type="text" value="编辑 todo..." v-if="editedTodo !=null && editedTodo.id == todo.id"
                    v-model="todo.title" @keyup.enter="editDone(todo)" @keyup.esc="cancelEdit(todo)" v-focus="true" />
            </li>
        </ul>
        <!-- end todo list -->
        <div v-if="todos">
            <span>剩余 {{ leftTodosCount }} 项未完成 ---</span>
            <span>筛选：
                <input type="button" value="全部" @click="intention='all'"
                    v-bind:class="{ selected: intention === 'all' }">
                <input type="button" value="进行中" @click="intention='ongoing'"
                    v-bind:class="{ selected: intention === 'ongoing' }">
                <input type="button" value="已完成" @click="intention='completed'"
                    v-bind:class="{ selected: intention === 'completed' }">
                <input type="button" value="清除已完成" @click="clearCompleted">
                <input type="button" value="清除全部" @click="clearAll">
            </span>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
    <script>
        let id = 0;
        var STORAGE_KEY = "vue-todo-list"
        var todoStorage = {
            fetch: function () {
                var todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
                todos.forEach(function (todo, index) {
                    todo.id = index
                });
                todoStorage.uid = todos.length;
                return todos
            },
            save: function (todos) {
                localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
            }
        }
        var app = new Vue({
            el: '#todo-app',
            data: function () {
                return {
                    todos: todoStorage.fetch(),
                    newTodoTitle: '',
                    editedTodo: null,
                    intention: 'all'
                }
            },
            methods: {
                addTodo: function () {
                    if (this.count != 0) {
                        this.todos.push({ id: todoStorage.uid++, title: this.newTodoTitle, completed: false });
                        this.newTodoTitle = '';
                    }
                    else {
                        alert("没有输入todo内容，无法创建新的todo");
                    }
                },
                markAsCompleted: function (todo) {
                    todo.completed = true;
                },
                markAsNotCompleted(todo) {
                    todo.completed = false;
                },
                removeTodo: function (todo) {
                    var r = confirm('确定删除吗？')
                    if (r == true) {
                        this.todos.splice(this.todos.indexOf(todo), 1)
                    }
                },
                editTodo: function (todo) {
                    this.editedTodo = {
                        id: todo.id, title: todo.title, completed: todo.completed
                    }
                },
                editDone: function (todo) {
                    this.editedTodo = null;
                    if (todo.title.length == 0) {
                        this.removeTodo(todo);
                    }
                },
                cancelEdit: function (todo) {
                    todo.title = this.editedTodo.title;
                    this.editedTodo = null
                },
                markAllAsCompleted: function () {
                    this.todos.map(
                        function (todo) {
                            if (!todo.completed) {
                                todo.completed = true;
                            }
                        }
                    )
                },
                clearCompleted: function () {
                    var r = confirm('确定删除吗？')
                    if (r == true) {
                        this.todos = this.todos.filter(todo => !todo.completed)
                    }
                },
                clearAll: function () {
                    var r = confirm('确定删除吗？')
                    if (r == true) {
                        this.todos = []
                    }
                }
            },
            computed: {
                count: function () {
                    return this.newTodoTitle.length
                },
                leftTodos: function () {
                    return this.todos.filter(todo => !todo.completed)
                },
                leftTodosCount: function () {
                    return this.leftTodos.length
                },
                filteredTodos: function () {
                    if (this.intention === 'ongoing') {
                        return this.leftTodos
                    } else if (this.intention === 'completed') {
                        return this.todos.filter(todo => todo.completed)
                    } else {
                        // 其它未定义的意图我们为其返回全部 todos，
                        // 这里面已经包含了 all 意图了
                        return this.todos
                    }
                }
            },
            directives: {
                focus: {
                    inserted: function (el) {
                        el.focus()
                    }
                }
            },
            watch: {
                todos: {
                    handler: function (todos) {
                        todoStorage.save(todos)
                    },
                    deep: true
                }
            }
        })
    </script>
</body>

</html>